import React from "react";
import Banner from '../banner'
import axios from 'axios'
import { useState, useEffect } from "react";
import { Outlet, useParams,Link } from 'react-router-dom'
export default function Cateagory() {
    var params = useParams()
    var [arr, setArr] = useState([])
    useEffect(() => {
        axios
            .get(
                `https://apipc-xiaotuxian-front.itheima.net/category?id=${params.id}`
            )
            .then(res => {
                if (res.data.msg == '操作成功') {
                    arr = res.data.result.children
                    setArr([...arr])
                    console.log(arr);
                }
            });
    }, [params.id])
    return <div>
        <div className="xtx-bread container" >
            <div className="xtx-bread-item">
                <a href="" className="router-link-active">首页</a>
            </div>
            <i className="iconfont icon-angle-right"></i>
            <div className="xtx-bread-item">
                {/* <span>{arr.name}</span> */}
            </div>
        </div>
        <div className="banner">
            <div className="commonwidth">
                <div className="cont">
                    <Banner></Banner>
                    <Outlet></Outlet>
                </div>
            </div>
        </div>
        <div className="commonwidth top-category">
            <div className="sub-list">
                <h3>全部分类</h3>
                <ul>
                    {arr.map((k, index) => {
                        return <li key={index}>
                            <img src={k.picture} />
                            <p>{k.name}</p>
                        </li>
                    })}
                </ul>
            </div>
            {arr.map((i, index) => {
                return <div className="ref-goods" key={index}>
                    <div className="head">
                        <h3> {i.name} </h3>
                        <p className="tag">温暖柔软，品质之选</p>
                        <a href="" className="xtx-more">
                            <span>查看全部</span>
                            <i className="iconfont icon-angle-right"></i>
                        </a>
                    </div>
                    <div className="body">
                        {i.goods.map((item, index) => {
                            return <Link to={'/proguct/' + item.id} className="goods-item" key={index}>
                                <img src={item.picture} alt="" />
                                <p className="name ellipsis">{item.name}</p>
                                <p className="desc ellipsis">{item.desc}</p>
                                <p className="price">¥{item.price}</p>
                            </Link>
                        })}

                    </div>
                </div>
            })}

        </div>
    </div>
}